<template>
  <!-- 场地管理 -->
  <div class="productManagement">
    <!-- 搜索 -->
    <div class="productManagement-content display-common-horizontal-between">
      <div class="button-common-round" @click="goToApply">场地申请</div>
      <CommonSearch :isShowKey="isShowKey"></CommonSearch>
    </div>
    <!-- 活动卡片 -->
    <div class="productManagement-content-list">
      <CommonCard :cardData="list"></CommonCard>
    </div>
    <!-- 场地管理 -->
    <CommonPagination
      :currentPage="currentPage"
      :pageSize="pageSize"
      :total="total"
      :size="size"
      :background="background"
      :disabled="disabled"
    ></CommonPagination>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import CommonCard from "@/components/common/commonCard.vue";
import CommonSearch from "@/components/common/commonSearch.vue";

const router = useRouter();
const route = useRoute();

const isShowKey = ref("productManagement_noSelect");
//登录
const Login = () => {
  // 存相关的身份信息
  // router.push('')
};
const goToApply = () => {
  // 跳转并传递相关参数
  // router.push("/VenueApplication");
  router.push({
    // path: "/VenueApplication",
    path: "/siteForm",
  });
};

//父組件向子組件傳值
// 将list传给子组件 子组件接受
const list = ref([
  {
    activeImg: "../../assets/images/activeImg.png", //活动图片
    title: "B512教室", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "审批成功", //活动状态
    people: "100", //活动人数
    address: "华中科技大学网安学院", //活动简介
    type: "空闲中", // 活动评论
    danwei: "华中科技大学",
  },
  {
    activeImg: "../../assets/images/activeImg.png", //活动图片
    title: "B513教室", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "审批成功", //活动状态
    people: "1020", //活动人数
    address: "华中科技大学网安学院", //活动简介
    type: "使用中", // 活动评论
    danwei: "华中科技大学网安学院",
  },
  {
    activeImg: "../../assets/images/activeImg.png", //活动图片
    title: "B512教室", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "审批成功", //活动状态
    people: "100", //活动人数
    address: "华中科技大学网安学院", //活动简介
    type: "空闲中", // 活动评论
    danwei: "华中科技大学网安学院",
  },
  {
    activeImg: "../../assets/images/activeImg.png", //活动图片
    title: "B512教室", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "审批未通过", //活动状态
    people: "100", //活动人数
    address: "华中科技大学网安学院", //活动简介
    type: "空闲中", // 活动评论
    danwei: "华中科技大学网安学院",
  },
  {
    activeImg: "../../assets/images/activeImg.png", //活动图片
    title: "B512教室", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "审批未通过", //活动状态
    people: "100", //活动人数
    address: "华中科技大学网安学院", //活动简介
    type: "空闲中", // 活动评论
    danwei: "华中科技大学网安学院",
  },
  {
    activeImg: "../../assets/images/activeImg.png", //活动图片
    title: "B512教室", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "审批未通过", //活动状态
    people: "100", //活动人数
    address: "华中科技大学网安学院", //活动简介
    type: "空闲中", // 活动评论
    danwei: "华中科技大学网安学院",
  },
  {
    activeImg: "../../assets/images/activeImg.png", //活动图片
    title: "B512教室", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "审批未通过", //活动状态
    people: "100", //活动人数
    address: "华中科技大学网安学院", //活动简介
    type: "空闲中", // 活动评论
    danwei: "华中科技大学网安学院",
  },
]);
</script>
<style lang="scss" scoped>
.productManagement {
  width: 100%;
  height: 100%;
  // background-color: #fff;
  .productManagement-content {
    margin-bottom: 34px;
    box-sizing: border-box;
    .productManagement-content-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding: 2em 6px;
      gap: 25px;
      border: 1px solid red;
      height: 400px;
    }
  }
}
</style>
